<template>
    <hl-page title="团队详情" :hidden-tab-bar="true" :hidden-back="false">
        <div class="content" slot="content">
            <hl-tab :tab="tab" @changeActive="changeTab"/>
            <user-item v-for="item in users" :key="item.id" :id="item.id" :level="item.level_label" :name="item.name"
                       :created-at="item.created_at"/>
        </div>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import HlTab from "../components/hl-tab";
    import UserItem from "../components/user-item";
    import {Url} from "../utils/config";

    export default {
        components: {
            UserItem,
            HlTab,
            HlPage
        },
        name: "team-detail",
        data() {
            return {
                tab: {
                    list: [
                        {id: 5, label: '区域领导'},
                        {id: 4, label: '总监'},
                        {id: 3, label: '经理'},
                        {id: 2, label: '副理'},
                        {id: 1, label: '专员'},
                        {id: 0, label: 'Vip客户'}
                    ],
                    select: 0
                },
                users: []
            }
        },
        mounted() {
            this.tab.select = this.$route.query.type ? this.$route.query.type : 0
            this.loadTeam()
        },
        methods: {
            changeTab(item) {
                this.tab.select = item.id
                this.loadTeam()
            },
            loadTeam() {
                let toast = this.$createToast({
                    txt: '正在加载',
                    time: 0
                });
                toast.show();
                this.$get(Url.teamUrl, {level: this.tab.select + 1}).then((res) => {
                    this.users = res.data
                    toast.hide()
                }).catch((error) => {
                    toast.hide()
                })
            }
        }
    }
</script>

<style scoped>

</style>